<!-- 手动配置小区 -->
<template>
  <el-form :model="popModel" size="mini" label-width="100px">
    <el-form-item :label="popModel.portType | getPortTypeName">
      <el-input style="width: 178px" v-model="popModel.searchKey"></el-input>

      <div class="pop-box" v-show="popResblockVisible">
        <div class="select-box">
          <div class="select-scroll">
            <div class="select-view" @click="handlePopResblock($event)">
              <div class="item" v-for="item in popModel.housingEstateOptions" :key="item.portResblockId">
                {{ item.portResblockName }}
              </div>
              <div class="item text-gray" v-show="popModel.loading">
                加载中...
              </div>
              <!-- <div class="item text-gray" v-show="!popModel.loading && popModel.housingEstateOptions.length == 0">
                无数据
              </div> -->
            </div>
          </div>
        </div>
        <div class="triangle"></div>
      </div>

      <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { matchingResblock } from "@/api/user";
export default {
  components: {},
  props: {
    delId: String,
    popModel: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      popResblockVisible: false,
    };
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  computed: {},
  methods: {
    handlePopResblock(e) {
      let innerText = e.target.innerText;
      if (innerText !== "加载中" && innerText !== "无数据") {
        this.popResblockVisible = false;
        this.popModel.searchKey = innerText;

        const item = this.popModel.housingEstateOptions.find((v) => v.portResblockName == innerText);
        Object.assign(this.popModel, item);
      }
    },
    // 手动搜索匹配小区
    handleSearch() {
      let query = this.popModel.searchKey;
      if (!query) {
        return this.$message.error("搜索词不能为空！");
      }

      this.popResblockVisible = true;
      this.popModel.housingEstateOptions = [];

      this.autoMatchingResblock(query);
    },

    // 自动匹配小区(暂时取消重试机制)
    autoMatchingResblock(name) {
      this.popModel.loading = true;
      matchingResblock({
        delId: this.delId,
        portResblockName: (name || '').trim(),
        portType: this.popModel.portType,
        actionType: 1,
        type: 0,
      })
        .then((content) => {
          this.popModel.loading = false;

          if (content.length) {
            this.popModel.housingEstateOptions = Object.freeze(content);
          } else {
            this.popResblockVisible = false;
            this.$message.error("未搜索到数据！");
          }
        })
        .catch(() => {
          this.popModel.loading = false;
          this.popResblockVisible = false;
        });
    },
  },
};
</script>
<style scoped>
.pop-box {
  position: absolute;
}
.select-box {
  position: absolute;
  overflow: hidden;
  min-width: 178px;
  max-width: 278px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 12px;
  border: solid 1px #dfe4ed;
  border-radius: 4px;
}

.select-box .select-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  max-height: 260px;
}

.select-view {
  padding: 6px 0;
}

.select-box .item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 34px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

.select-box .item:hover {
  background-color: #f5f7fa;
}

.triangle {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  border-top-width: 0;
  border-bottom-color: #e6ebf5;
  left: 35px;
  top: 6px;
}
.triangle::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  transform: translateX(-50%);
  top: 2px;
}

.item.text-gray {
  color: #808080;
}
</style>
